<template>
	<view>
        <view class="wrap">
            <view class="tabs-view">
                <u-tabs active-color="#ff5000" :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
            </view>
            <view class="swiper-box">
                <mescroll-body ref="mescrollRef" top="80" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
                    <!-- 售后申请 -->
                    <view class="order-list-view" v-if="current == 0" v-for="(order,index) in orderList">
                        <view class="order-header" >
                            <view class="order-sn u-flex">
                                <u-icon name="shop" custom-prefix="custom-icon" size="35"></u-icon>
                                <view class="u-margin-left-10">{{order.seller_name}}</view>
                                <u-icon name="arrow-right" color="#c8c9cc"></u-icon>
                            </view>
                            <view class="order-status">{{order.order_status_text}}</view>
                        </view>
                        <view class="goods-list-view" v-for="(sku,skuIndex) in order.sku_list" >
                            <goods-info
                                :goodsName="sku.name"
                                :goodsNum="sku.num"
                                :goodsPrice="sku.subtotal"
                                :goodsImg="sku.goods_image"
                                :goodsSpec="sku.spec_list"
                            >
                            </goods-info>
                            <view class="sku-footer">
                                <view class="service-text" v-if="!sku.goods_operate_allowable_vo.allow_apply_service">该商品无法申请售后</view>
                                <view></view>
                                <u-tag class="u-margin-left-30" :disabled="!sku.goods_operate_allowable_vo.allow_apply_service" text="申请售后" type="error" mode="plain" shape="circle" @click="onAfterSale(order.sn,sku)" />
                            </view>
                        </view>
                    </view>
                    <!-- 申请记录 -->
                    <view class="order-list-view" v-if="current == 1" v-for="(order,index) in orderList" @click="onAfterSaleDetail(order.service_sn)">
                        <view class="order-header">
                            <view class="order-sn">
                                <text>{{order.service_sn}}</text>
                                <u-icon name="arrow-right" color="#c8c9cc"></u-icon>
                            </view>
                            <view class="order-status">{{order.service_type_text}}</view>
                        </view>
                        <view class="goods-list-view" v-for="(goods,skuIndex) in order.goods_list" >
                            <goods-info
                                :goodsName="goods.goods_name"
                                :goodsNum="goods.return_num"
                                :goodsPrice="goods.price"
                                :goodsImg="goods.goods_image"
                            >
                            </goods-info>
                            <view class="sku-footer">
                            </view>
                        </view>
                        <view class="order-footer">
                            <view class="u-flex">
                                <view class="status-text">{{order.service_status_text}}</view>
                                <view class="status-describe">{{order.service_status | parseServiceStatus}}</view>
                            </view>
                        </view>
                    </view>
                </mescroll-body>
            </view>
        </view>
	</view>
</template>

<script>
    import * as API_Order from '@/api/order.js'
    import * as API_AfterSale from '@/api/after-sale.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
        mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
                tabList: [{
					name: '售后申请'
				}, {
					name: '申请记录'
				}],
                current: 0,
                params: {
                    page_no: 1,
                    page_size: 10,
                },
                orderList: [],
                down: {
                    auto: false
                }
			};
		},
        onLoad() {
        },
        methods: {
            //上拉加载数据
            upCallback (page){
                this.params.page_no = page.num;
                if(this.current == 0){
                    this.getOrderList();
                } else {
                    this.getAfterSale();
                }
            },
            //下拉刷新
            downCallback(){
				this.orderList = []
                if(this.current == 0){
                    this.getOrderList();
                } else {
                    this.getAfterSale();
                }
            },
            getOrderList(){
                API_Order.getOrderList(this.params).then(res => {
                    let orderList = res.data;
                    orderList.forEach(order => {
                        order.sku_list.forEach(sku => {
                            let specValues = "";
                            if (sku.spec_list !== null){
                                sku.spec_list.forEach(spec => {
                                    specValues += spec.spec_value+",";
                                })
                            }
                            sku.spec_value_str = specValues.slice(0,specValues.length-1);
                        })
                    })
                    this.orderList = this.orderList.concat(orderList);
                    this.mescroll.endBySize(res.data.length, res.data_total);
                })
            },
            onAfterSale(sn, sku){
                uni.navigateTo({
                    url: `/order-module/order/after-sale/after-sale-select?sn=${sn}&sku=${encodeURIComponent(JSON.stringify(sku))}`
                })
            },
            change(e){
                this.current = e;
                this.params.page_no = 1;
                this.orderList =[];
                if(e == 0){
                    this.getOrderList();
                } else {
                    this.getAfterSale();
                }
            },
            getAfterSale(){
                API_AfterSale.getAfterSale(this.params).then(res => {
                    this.orderList = this.orderList.concat(res.data);
					console.log(11, this.orderList)
                    this.mescroll.endBySize(res.data.length, res.data_total);
                })
            },
            onAfterSaleDetail(sn){
                console.log(sn);
                uni.navigateTo({
                    url: '/order-module/order/after-sale/alter-sale-detail?sn='+sn,
                })
            }
        }
	}
</script>

<style lang="scss">
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }
    .swiper-box {
        flex: 1;
        height: 90%;
    }
    .order-list-view {
        margin: 20rpx;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
        .order-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 20rpx;
            .order-sn {
                font-size: 29rpx;
                font-weight: bold;
            }
            .order-status {
                color: #ff5000;
                font-weight: 500;
            }
        }
        .goods-list-view {
            padding: 10rpx 20rpx;
            .sku-footer {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                .service-text {
                    color: #606266;
                }
            }
        }
        .order-footer {
            display: flex;
            flex-direction: row;
            // justify-content: center;
            background-color: #f6f6f6;
            margin: 10rpx 20rpx;
            padding: 20rpx 0rpx;
            border-radius: 10rpx;
            .status-text {
                margin-right: 30rpx;
                font-weight: 600;
                padding-left: 20rpx;
            }
            .status-describe {
                color: #909399;
            }
        }
        .order-price-view {
            padding-right: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            .order-total-price {
                color: #82848a;
                margin-left: 10rpx;
            }
            .order-pay-price {
                font-size: 33;
                font-weight: 600;
                margin-left: 8rpx;
            }
        }
    }
</style>
